$(function () {
    /**
     *  1 拿到 搜索页面传递过来的关键字的值
     *  2  根据这个关键字的值进行ajax  
     *  3 传递请求的参数 最少需要三个
     *   1 page |是|第几页 
     *   2 pageSize|是|每页的条数
     *   3 传递关键字的值
     * 
     *  4 成功了把数据展示在页面上
     * 
     * 
     * 
     */


    // 1 拿到 搜索页面传递过来的关键字的值
    var url = window.location.href;
    // console.log(url);
    var index = url.indexOf('?');
    // console.log(index);
    var len = url.substring(index + 1);
    // console.log(len);
    var arr = len.split('=');
    // console.log(arr);
    // console.log(arr[1]);

    var pages = 1;
    var pageSizes = 4;
    var keys = arr[1];
    var htmls = '';
    var priceNum = 1;  /*价格排序*/
    var that = null;
    var lengNum = 1;    /** 销量排序*/


    /**
     * 1 找到加载的区域或者叫容器  refreshContainer===html页面的的具体地方
     * 2 mui.init 会默认执行一次  第二次的时候pages需要加加
     * 3 加载完毕后 是否还有更多数据的时候 this 的指向   that.endPullupToRefresh(false)
     * 4 htmls += template('tmp', res);  当前页的数据跟之要把当前的前的数据一起加起来 然后再一起展示
     * 5 判断  if (res.data.length > 0) 是否后面还有没有更多数据 如果没有就不需要再进行ajax   
     * 
     * 
     */
    // var refreshContainer = document.querySelector("refreshContainer");
    mui.init({
        pullRefresh: {
            container: '#refreshContainer',//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
            up: {
                height: 80,//可选.默认50.触发上拉加载拖动距离
                auto: true,//可选,默认false.自动上拉加载一次
                contentrefresh: "我的乐淘正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
                contentnomore: '我的乐淘没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
                callback: getData //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
            }
        }
    });


    /**
     *  1价格排序  默认的情况是随机排 还是从小到大排？？ 
     *   1.1 默认情况下我们给1 进行升序
     *  2 给按钮绑定点击事件 
     *  3  把之前的商品进行清空，然后排序排好的所有的商品进行重新展示（从高到低或者是从低到高）
     * 
     * priceSort
     * 
     */



    $('#priceSort').on('tap', function () {
        // alert(1)
        // if (priceNum == 1) {  //是升序 
        //     priceNum = 2;
        // } else {
        //     priceNum = 1;
        // }
        priceNum = priceNum == 1 ? 2 : 1;  //三元表达式
        console.log(priceNum);
        lengNum='';  /*如果是价格排序那么就把销量的值重置为空*/
        // console.log(priceNum);
        htmls = '';             // htmls 也需要清空
        $('#ulBox').html('');   //内容也需要清空
        // console.log(htmls)
        pages = 1;              //pages 也需要重置 从一页开始
        getData();
        // mui('#pullup-container').pullRefresh().refresh(true);
        mui('#refreshContainer').pullRefresh().refresh(true);
        //id 名字也需要改完成我们自己的id 


    })


    /**
     * 销量排序
     * 
     */

    $('#lengNum').on('tap', function () {
        lengNum = lengNum == 1 ? 2 : 1;  //三元表达式
        console.log(lengNum);
        priceNum = '';  
        /** 如果是销量排序 那么就把价格的值重置为空  因为价格跟销量会冲突  */
        htmls = '';             // htmls 也需要清空
        $('#ulBox').html('');   //内容也需要清空
        // console.log(htmls)
        pages = 1;              //pages也需要重置 从一页开始
        getData();
        // mui('#pullup-container').pullRefresh().refresh(true);
        mui('#refreshContainer').pullRefresh().refresh(true);
        //id 名字也需要改完成我们自己的id 


    })









    function getData() {
        if (!that) {
            that = this;     //mui
        }
        // console.log(that);
        $.ajax({
            url: '/product/queryProduct',
            type: 'get',
            data: {
                page: pages++,
                pageSize: pageSizes,
                key: keys,
                price: priceNum,
                num: lengNum
            },
            success: function (res) {
                // console.log(res);
                /**
                 *  如果加载第二页甚至后面更多的页数的数据的时候，应该是
                 * 要把之前所有的数据一起加起来，然后再进行展示
                 */

                /**
                 * 判断你下拉加载的时候如果没有数据那么就不再进行加载更多
                 * 而是提示“没有更多数据了”
                 */

                if (res.data.length > 0) {
                    htmls += template('tmp', res);
                    // console.log(htmls);
                    $('#ulBox').html(htmls);
                    //注意：
                    //1、加载完新数据后，必须执行如下代码，true表示没有更多数据了：
                    //2、若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后
                    // console.log(this);
                    // console.log('------------------')
                    //  console.log(that);
                    that.endPullupToRefresh(false);  //false 表示还有更多数据
                } else {
                    that.endPullupToRefresh(true);
                }


            }
        });
    }






})